
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  margin: 0 0 $gutter-w;
}
p {
  margin: 0 0 $gutter-w;
}

section {
  padding: $gutter-w * 2;
}

.card-link {
  transition: background 0.2s ease-in-out;
  &:hover {
    background: rgba($theme-base, 0.065);
  }
}

// Badges
.badge {
  font-family: 'Source Code Pro', monospace;
  margin: ($gutter-h * 0.25);
  line-height: 1.8;
  padding: 0 ($gutter-w * 0.75);
  font-size: 85%;
  background: $theme-secondary;
  color: rgba(black, 0.87);
  font-weight: 600;
  .data-type {
    color: rgba(black, 0.57);
    margin-left: $gutter-h * 0.75;
  }
}

// Alerts
.alert {
  position: relative;
  margin-bottom: $gutter-w * 2;
  line-height: 1.8;
  .close-btn {
    position: absolute;
    top: $gutter-h;
    right: $gutter-h;
    &:hover {
      .material-icons {
        color: $text-dark
      }
    }
    .material-icons {
      color: $text-lighter;
      transition: color 0.2s ease-in-out;
    }
  }
}

// Page
// ----------------------------------

// Subheader
.subheader {
  display: flex;
  flex-direction: column;
  background: rgba($query-editor-bg, 0.5);
  padding: $gutter-w * 4;
  h1 {
    margin: 0 0 $gutter-w;
  }
  .subtitle {
    font-size: 1.1rem;
    a {
      display: inline;
    }
  }
}

// Table Header
.table-header {
  margin: 0 (-$gutter-h * 1.25) ($gutter-w * 2);
  padding-right: $gutter-h * 1.25;
  .form-group {
    position: relative;
    width: 100%;
    padding: 0;
    &:hover {
      .input-icon {
        display: flex;
      }
    }
    input {
      font-size: 1.6rem;
      border: 0;
      height: auto;
      line-height: 1.6;
      font-weight: bold;
      padding-right: 24px;
      &:hover {
        background: rgba($theme-base, 0.035);
      }
      &:focus {
        background: transparent;
        box-shadow: inset 0 0 0 1px $border-color;
      }
    }
    .input-icon {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      align-items: center;
      display: none;
      .material-icons {
        font-size: 22px;
        width: 24px;
        margin-right: $gutter-h;
        color: $text-lighter;
      }
    }
  }
  select {
    font-size: 1.1rem;
    line-height: 2.1;
    height: auto;
    margin-left: $gutter-w;
  }
}

// Code
.code-wrap {
  margin-top: $gutter-w * 3;
}
.schema-header {
  display: flex;
  align-items: center;
  min-height: 35px;
  margin-bottom: $gutter-h;
  .title {
    margin: 0;
  }
}

// Code Examples

.template {
  .schema-header {
    .btn-primary {
      display: none;
    }
  }
  .tabulator-row {
    .tabulator-cell:hover {
      background: transparent;
      cursor: default;
      input {
        cursor: default;
      }
    }
  }
}

// Footer
// --------------------------------
footer {
  padding: $gutter-w * 2;
  padding-top: $gutter-w * 4;
  padding-bottom: $gutter-w * 6;
  a {
    color: $theme-primary;
  }
  .created-by {
    display: flex;
    align-items: center;
  }
}